<template>
  <div class="">
  <el-dialog
  :title="ids!=='' ? '修改' : '新增'"
  :visible="dialogVisible"
  width="70%"
  @close="handleClose"
  v-loading="loading">
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px">
  <el-form-item label="商户名" prop="username">
    <el-input v-model="ruleForm.username"></el-input>
  </el-form-item>
  <el-form-item label="账号身份" prop="userSession">
    <el-radio v-model="ruleForm.userSession" label="0">游客</el-radio>
    <el-radio v-model="ruleForm.userSession" label="1">管理员</el-radio>
  </el-form-item>
  </el-form>
  <el-button @click="handleClose">取 消</el-button>
  <el-button type="primary" @click="dialogVisibleadd">确 定</el-button>
  </el-dialog>
  </div>
</template>

<script>
import { userUserssionSave } from '@/api/userssion'
export default {
  name:'',
  props: {
    ids:{
      default:''
    },
    shopuser:{
      default: () => {}
    },
    dialogVisible:{
      default:false
    }
  },
   
  components: {},
   
  data () {
   return {
     loading:false,
     ruleForm:{
       id:'',
       username:'',
       userSession:'',
     },
     rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 11, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
         userSession: [
          { required: true, message: "请选择账号身份", trigger: "blur" },
        ],
      },
   }
  },
  
  computed: {},
  
  watch: {
    shopuser(val){
      this.ruleForm = val
    }
  },
  created () {
  },
  
  methods: {
    // 修改提交
    async dialogVisibleadd(){
       const id = this.ids
       this.ruleForm =  {...this.ruleForm, id}
       const { data } = await userUserssionSave(this.ruleForm)
       if (data.status == '200'){
          this.$emit("refreshPage")
          this.$message.success(data.message)
        }
    },
    // 关闭弹窗
    handleClose(){
      this.ruleForm = {
       username:'',
       userSession:'',
       anyname:''
     },
      this.$emit("update:dialogVisible",false)
    }
  },
  
  mounted () {}
}
</script> 

<style scoped lang="less">

</style>